<script setup lang="ts">
import { ref, onMounted } from 'vue';
import DarkModeContainer from '@/components/common/dark-mode-container.vue';
import { useThemeStore } from '@/store/modules/theme';
import SvgIcon from '@/components/custom/svg-icon.vue';
import { ElMessage } from 'element-plus';

defineOptions({ name: 'ClientFooter' });

const themeStore = useThemeStore();
const currentYear = new Date().getFullYear();

// 励志语录数据
interface Quote {
  text: string;
  author: string;
}

const quotes: Quote[] = [
  // 原有语录...
  { text: '你越是愿意认识到自己的脆弱，就越不会害怕。', author: '洛杉矶·戈特利布' },
  { text: '生活不是等待风暴过去，而是学会在雨中跳舞。', author: '薇薇安·格林' },
  // 新增语录（20条）：
  { text: '天行健，君子以自强不息；地势坤，君子以厚德载物。', author: '《周易》' },
  { text: '路漫漫其修远兮，吾将上下而求索。', author: '屈原' },
  { text: '黑夜无论怎样悠长，白昼总会到来。', author: '莎士比亚' },
  { text: '世界上只有一种真正的英雄主义，那就是认清生活的真相后依然热爱生活。', author: '罗曼·罗兰' },
  { text: '宝剑锋从磨砺出，梅花香自苦寒来。', author: '《警世贤文》' },
  { text: '那些杀不死你的，终将使你更强大。', author: '尼采' },
  { text: '不积跬步，无以至千里；不积小流，无以成江海。', author: '荀子' },
  { text: '生命就像一盒巧克力，结果往往出人意料。', author: '《阿甘正传》' },
  { text: '鸡蛋，从外打破是食物，从内打破是生命。', author: '李嘉诚' },
  { text: '为天地立心，为生民立命，为往圣继绝学，为万世开太平。', author: '张载' },
  { text: '今天很残酷，明天更残酷，后天很美好，但绝大多数人死在明天晚上。', author: '马云' },
  { text: '你的时间有限，不要浪费于重复别人的生活。', author: '史蒂夫·乔布斯' },
  { text: '老当益壮，宁移白首之心？穷且益坚，不坠青云之志。', author: '王勃' },
  { text: '自信人生二百年，会当水击三千里。', author: '毛泽东' },
  { text: '预测未来最好的方式就是创造它。', author: '艾伦·凯' },
  { text: '古之立大事者，不惟有超世之才，亦必有坚忍不拔之志。', author: '苏轼' },
  { text: '长风破浪会有时，直挂云帆济沧海。', author: '李白' },
  { text: '不要问国家能为你做什么，要问你能为国家做什么。', author: '肯尼迪' },
  { text: '志之所趋，无远弗届；穷山距海，不能限也。', author: '《格言联璧》' },
  { text: '宇宙中最强大的力量，就是复利和坚持。', author: '爱因斯坦' }
];

const currentQuote = ref<Quote>(quotes[0]);
const showAuthor = ref(false);

// 随机获取一条语录
function getRandomQuote() {
  const randomIndex = Math.floor(Math.random() * quotes.length);
  currentQuote.value = quotes[randomIndex];
}

// 复制语录
function copyQuote() {
  const quoteText = `${currentQuote.value.text} —— ${currentQuote.value.author}`;
  navigator.clipboard.writeText(quoteText).then(() => {
    ElMessage.success('已复制到剪贴板');
  }).catch(() => {
    ElMessage.error('复制失败');
  });
}

// 组件挂载时获取随机语录
onMounted(() => {
  getRandomQuote();
});
</script>

<template>
  <DarkModeContainer class="h-full flex-center">
    <div 
      class="relative flex-center w-full cursor-pointer group"
      @click="copyQuote"
      @mouseenter="showAuthor = true"
      @mouseleave="showAuthor = false"
    >
      <!-- 励志语录文本 - 使用nowrap防止换行 -->
      <span 
        class="text-14px text-center transition-all max-w-lg px-8 whitespace-nowrap overflow-hidden text-ellipsis"
        :class="themeStore.footer.fixed ? 'dark:text-white' : 'text-[#6a6a6a] dark:text-white'"
      >
        {{ currentQuote.text }}
      </span>
  
        <span 
  :class="showAuthor ? 'opacity-100' : 'opacity-0'"
  class="inline-flex rounded p-1 transition-colors duration-200 hover:bg-gray-100/50 dark:hover:bg-gray-800/50"
  @click.stop="getRandomQuote"
>
  <SvgIcon 
    icon="mdi:refresh" 
    class="text-16px text-gray-500 dark:text-gray-400" 
  />
</span>
  
    </div>
  </DarkModeContainer>
</template>

<style scoped>
/* 修复后台管理端底部位置 - 使底部内容相对于整个页面宽度居中，而不受左侧菜单影响 */
:deep(.el-footer) {
  width: 100vw !important;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 !important;
}
</style> 